import { Container, ChoiceList } from "./styled";
import { Radio, Space } from "antd";
import Title from "@/componets/Title";
import { useCallback, useState } from "react";
import { QuestionProps } from "@/api/question";
import MarkDownComponent from "../markdown";

const Choice = ({ index, data, handleCheck, value }: QuestionProps) => {
  const { type, question, options, description, answer, tags, difficulty } = data;
  const onChange = useCallback((e: any) => {
    handleCheck(e.target.value);
  }, []);
  return (
    <Container>
      <Title type={type} index={index} title={question} />
      {description && <MarkDownComponent text={description} />}
      <ChoiceList>
        <Radio.Group onChange={onChange} value={value} size="large">
          <Space direction="vertical">
            {(options ? JSON.parse(options) : []).map((it: string) => (
              <Radio value={it} key={it}>
                {it}
              </Radio>
            ))}
          </Space>
        </Radio.Group>
      </ChoiceList>
    </Container>
  );
};

export default Choice;
